<template>
    <div>
        <!-- 顶部滑动条 -->
        <div id="slider" class="mui-slider">
			<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				<div class="mui-scroll">
					<a :class="['mui-control-item' , item.id==0?'mui-active':'']" v-for="item in categoryList" :key="item.id" @click="getImgList(item.id)">
						{{item.title}}
					</a>
				</div>
			</div>
		</div>
        <!-- 图片列表区域 -->
        <ul class="photo-list">
            <router-link v-for="item in photoList" :key="item.id" :to="'/home/photoInfo/'+item.id" tag="li">
                <img v-lazy="item.img_url">
                <div class="img_content">
                    <h3 class="img_title">{{item.title}}</h3>
                    <p class="img_body">{{item.abstract}}</p>
                </div>
            </router-link>
        </ul>
    </div>
</template>

<script>
// 1、导入mui的js文件
import mui from '../../lib/mui/js/mui.js'
// 2、初始化滑动控件
// mui('.mui-scroll-wrapper').scroll({
// 	deceleration: 0.0005 //减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
// });
export default {
    data(){
        return {
           categoryList:[
            //    {id:0,title:"全部"},
               {id:1,title:'家居生活'},
               {id:2,title:'摄影设计'},
               {id:3,title:'明星美女'},
               {id:4,title:'娱乐八卦'},
               {id:5,title:'幽默搞笑'},
               {id:6,title:'巴拉巴拉'}
           ] ,
           photoList:[
                  { id:1,img_url:'https://p99.pstatp.com/list/190x124/pgc-image/e1759a717c3246ffa58f5d40ed65842e',
                  title:'壮阔山河，一路改革',
                  abstract:'马里亚纳海沟暗藏于亚洲东部太平洋底，一道全长2550千米的弧，最深处超过1.1万米。人类——或者人造设备——抵达这里的次数屈指可数。高压、漆黑和冰冷的一个世界深藏其间，罕有生命痕迹。'},
                  { id:2,img_url:'https://p1.pstatp.com/list/190x124/pgc-image/RCOsOWgJ8P1phi',
                  title:'浙江一对情侣吵架，女友突然下车横卧在高速路中间！接下来更是意想不到',
                  abstract:'情侣之间撒撒娇，偶尔小作一下，可能会是一种乐趣，但如果要是连命也豁出去了，那就真当是作死的节奏！'},
                   { id:3,img_url:'https://p99.pstatp.com/list/190x124/pgc-image/RCNYW5j7KrlgCj',
                  title:'徐锦江回应撞脸海王：我们很像但他身材更好',
                  abstract:'由温子仁执导的DC超级英雄大片《海王》累计票房已经突破12亿，《海王》的热映也让演员徐锦江不断登上热搜，因为不少观众发现徐锦江和海王的演员杰森·莫玛长得有点像，甚至把徐锦江的脸P在海王的身上，也毫无违和感。'}    
           ]
        }
    },
    methods:{
        // getCategoryList(){
        //     this.$http.get('url').then(function(res){
        //         if(res.body.status==0){
        //             // 手动拼接
        //            this.body.message.unshift({title:'全部',id:0});
        //            this.categoryList = this.body.message
        //         }
        //     })
        // },
        // 模拟
         getCategoryList1(){
            this.categoryList.unshift({id:0,title:"全部"});
            // alert('hello');
        },
        getImgList(cataid){
            // 根据分类id获取图片列表
            this.$http.get('url'+cataid).then(res=>{
                if(res.body.status==0){
                    this.photoList =res.body.message; 
                }
            })
        }
        // 模拟
        // getImgList1(cataid){
        // }

    },
    created(){
        // getCategoryList()
        this.getCategoryList1();
        // alert('hello');
        // 第一次调用 默认传值id为0 也就是全部
        // this.getImgList(0)
    },
    mounted(){
    mui('.mui-scroll-wrapper').scroll({
	    deceleration: 0.0005 //减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    }); 
    }
}
</script>

<style lang="less" scoped>
*{
    touch-action: pan-y;
}

.photo-list{
    
    list-style: none;
    padding: 10px;
    margin: 0;
    padding-bottom: 0;
    li{
        background-color: #ccc;
        text-align: center;
        box-shadow: 0 0 10px #999;
        margin-bottom: 10px;
        position: relative;
        img[lazy=loading] {
        width: 40px;
        height: 300px;
        margin: auto;
        }
        img{
            width: 100%;
            vertical-align: middle;
        }
        .img_content{
            position: absolute;
            bottom: 0px;
            background-color:rgba(0,0,0,0.5);
            color: #fff;
            text-align: left;
            max-height: 84px;
            .img_title{
                font-size: 14px;   
            }
            .img_body{
                font-size: 13px;
                color: #fff;
            }
        }
    }
}
</style>


